<template>
  <div>
    <el-row>
      <el-col :span="10">
        <div class="grid-content bg-purple">
          <div id="main" style="width: 400px;height: 300px;"></div>
        </div>
      </el-col>
      <el-col :span="14">
        <div class="grid-content bg-purple-light">
          <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
          <div id="main2" style="width: 450px;height: 300px;"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import * as showApi from '../api/show'
  export default {
    name: '',
    data(){
      return {
        charts: '',
        opinion: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
        opinionData: [
          {value: 335, name: '直接访问'},
          {value: 310, name: '邮件营销'},
          {value: 234, name: '联盟广告'},
          {value: 135, name: '视频广告'},
          {value: 1548, name: '搜索引擎'}
        ],
        charts2: '',
        xAxisData: [],
        seriesData: []
      }
    },
    methods: {
      drawPie(id){
        this.charts = echarts.init(document.getElementById(id))
        this.charts.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a}<br/>{b}:{c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data: this.opinion
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'blod'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: this.opinionData
            }
          ]
        })
      },
      drawPie2(id){
        // 基于准备好的dom，初始化echarts实例
        this.charts2 = echarts.init(document.getElementById(id));
        // 指定图表的配置项和数据
        var option = {
          // 标题
          title: {
            text: '工作量走势图',
            subtext:'',
            left:'left',
            borderColor:'red',
            borderWidth:1
          },
          // 工具箱
          toolbox: {
            show: true,
            feature:{
              saveAsImage:{
                show:true
              },
              restore:{
                show:true
              },
              dataView:{
                show:true
              },
              dataZoom:{
                show:true
              },
              magicType:{
                type:['line','bar']
              }

            }
          },
          tooltip:{
            trigger:'axis'
          },
          // 图例
          legend: {
            data: ['工作量']
          },
          // x轴
          xAxis: {
            data: this.xAxisData
          },
          yAxis: {},
          // 数据
          series: [{
            name: '工作量',
            type: 'bar',
            data: this.seriesData,
            markPoint:{
              data:[
                {type:'min',name:'最小值'}
              ]
            },
            markLine:{
              data:[
                {type: 'average',name:'平均值'}
              ]
            }
          }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        this.charts2.setOption(option);
      },
      getEchartsData(){
        debugger
        var params = {}
        showApi.selectWorkForEcharts(params).then((res)=>{
             if(res.success == true){
               debugger
               var arr = []
               arr = res.object
               var xData = []
               var yData = []
               var optionData = []
               for(var i=0,len=arr.length;i<len;i++) {
                 xData.push(arr[i].workTimeStr)
                 yData.push(arr[i].workCount)
                 var obj = {}
                 obj.value = arr[i].workCount
                 obj.name = arr[i].workTimeStr
                 optionData.push(obj)
               }
               this.opinion = xData
               this.opinionData = optionData
               this.xAxisData = xData
               this.seriesData = yData
               this.$nextTick(function () {
                 this.drawPie('main')
                 this.drawPie2('main2')
               })
             }
        })
      }
    },
    mounted(){
      debugger
      this.getEchartsData()
    }
  }
</script>

<style>


</style>
